<template>
  <div
    :key="item.id"
    :class="`caption-edit-item row ${isActived ? 'active' : ''}`"
    @mouseover="showHover = true"
    @mouseout="showHover = false"
  >
    <div class="column justify-start q-mr-sm" style="width: 68px; height: 100%">
      <q-input
        dense
        standout
        borderless
        bg-color="primary"
        :model-value="item.startTimeStr"
        @update:model-value="changeStartTime"
        input-class="text-center"
        readonly
        class="q-mb-sm"
        hide-bottom-space
      />
      <q-input
        dense
        standout
        borderless
        bg-color="primary"
        :model-value="item.endTimeStr"
        @update:model-value="changeEndTime"
        input-class="text-center"
        readonly
        hide-bottom-space
      />
    </div>
    <div class="col">
      <q-input
        type="textarea"
        standout="bg-white"
        bg-color="primary"
        label-color="accent"
        :model-value="item.text"
        @update:model-value="changeText"
        autogrow
        input-style="min-height: 84px;padding: 4px"
        hide-bottom-space
        @focus="onInputFocus"
        @blur="onInputBlur"
      />
    </div>
    <div class="hover" v-show="showHover">
      <div class="hover-btn-group top-group row q-gutter-x-xs" v-if="!isFirst">
        <q-btn
          dense
          rounded
          icon="mdi-plus"
          color="accent"
          size="sm"
          @click="addCaption('top')"
        ></q-btn>
        <q-btn
          dense
          rounded
          icon="mdi-set-center"
          color="sub"
          size="sm"
          @click="combineCaption('top')"
        ></q-btn>
      </div>
      <div class="hover-btn-group bottom-group row q-gutter-x-xs">
        <q-btn
          dense
          rounded
          icon="mdi-plus"
          color="accent"
          size="sm"
          @click="addCaption('bottom')"
        ></q-btn>
        <q-btn
          dense
          rounded
          icon="mdi-set-center"
          color="sub"
          size="sm"
          @click="combineCaption('bottom')"
        ></q-btn>
      </div>
      <q-btn
        class="delete-btn"
        dense
        rounded
        outline
        size="sm"
        color="negative"
        icon="mdi-delete"
        @click="deleteCaption"
      ></q-btn>
    </div>
  </div>
</template>
<script setup lang="ts">
import Caption from 'src/models/Caption';
import { useCaptionStroe } from 'stores/caption-store';
import { useStudioStore } from 'stores/studio-store';
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
const captionStore = useCaptionStroe();
const studioStore = useStudioStore();
const { activeCueId, captionList } = storeToRefs(captionStore);

const props = defineProps({
  item: {
    type: Caption,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
});
const isActived = computed(() => {
  return activeCueId.value === props.item.id;
});
const isFirst = computed(() => {
  return props.index === 0;
});
const isMiddle = computed(() => {
  return props.index > 0 && props.index < captionList.value.length - 1;
});
const isLast = computed(() => {
  return props.index === captionList.value.length - 1;
});
const showHover = ref(false);
function changeStartTime() {
  // console.log(props.item.startTime);
}
function changeEndTime() {
  // console.log(props.item.endTime);
}
function changeText(value: string | number | null) {
  captionStore.updateText(props.item, value as string);
}
function deleteCaption() {
  captionStore.removeCaption(props.item);
}
function addCaption(type: 'top' | 'bottom') {
  captionStore.addCaptionByCaption(props.item, type);
}
function combineCaption(type: 'top' | 'bottom') {
  if (type === 'top') {
    if (props.index <= 0) return;
    const caption1 = captionList.value[props.index - 1];
    const caption2 = props.item;
    captionStore.combineCaption(caption1, caption2);
  } else {
    if (props.index >= captionList.value.length - 1) return;
    const caption1 = props.item;
    const caption2 = captionList.value[props.index + 1];
    captionStore.combineCaption(caption1, caption2);
  }
}
function onInputFocus() {
  studioStore.isTyping = true;
}
function onInputBlur() {
  studioStore.isTyping = false;
}
</script>
<style lang="scss" scoped>
.caption-edit-item {
  cursor: pointer;
  padding: 8px;
  width: 100%;
  min-height: 80px;
  position: relative;
  &.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 2px solid $accent;
  }
  .hover {
    width: 100%;
    height: 100%;
    .top-group {
      position: absolute;
      top: 0;
      left: 84px;
    }
    .bottom-group {
      position: absolute;
      bottom: 0;
      left: 84px;
    }
    .delete-btn {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}
</style>
